<template>
<call-back />
  <div class="recharge-container">
    <!-- 引入公共头部导航栏 -->
    
    <!-- 全局加载组件 -->
    <div class="loading-overlay" v-if="loading">
      <div class="loading-spinner">
        <el-icon class="is-loading"><Loading /></el-icon>
        <span>{{ t('loading') }}</span>
      </div>
    </div>
    
    <div class="recharge-content">
      <!-- 项目咨询套餐 -->
      <div class="recharge-section">
        <h2 class="section-title">{{ t('project_consultation') }}</h2>
        <div class="card-container">
          <!-- 月卡 -->
          <div class="recharge-card">
            <div class="card-header">
              <span class="card-icon">📅</span>
              <span class="card-title">{{ t('month_card') }}</span>
            </div>
            <div class="card-body">
              <div class="card-info">
                <span class="info-label">{{ t('month_card_price') }}:</span>
                <span class="info-value">{{ monthFee }} {{ t('yuan_per_once') }}</span>
              </div>
              <div class="card-info">
                <span class="info-label">{{ t('remaining_days') }}:</span>
                <span class="info-value">{{ monthTimes }} {{ t('day') }}</span>
              </div>
            </div>
            <div class="card-footer">
              <button class="recharge-button" @click="handleRechargeClick('month')">{{ t('recharge') }}</button>
            </div>
          </div>
          
          <!-- 次卡 -->
          <div class="recharge-card">
            <div class="card-header">
              <span class="card-icon">🔢</span>
              <span class="card-title">{{ t('once_card') }}</span>
            </div>
            <div class="card-body">
              <div class="card-info">
                <span class="info-label">{{ t('once_card_fee') }}:</span>
                <span class="info-value">{{ onceFee }} {{ t('yuan_per_once') }}</span>
              </div>
              <div class="card-info">
                <span class="info-label">{{ t('remaining_times') }}:</span>
                <span class="info-value">{{ onceTimes }} {{ t('times') }}</span>
              </div>
            </div>
            <div class="card-footer">
              <button class="recharge-button" @click="handleRechargeClick('once')">{{ t('recharge') }}</button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 工作事业套餐 -->
      <div class="recharge-section">
        <h2 class="section-title">{{ t('work_education') }}</h2>
        <div class="card-container">
          <!-- 月卡 -->
          <div class="recharge-card">
            <div class="card-header">
              <span class="card-icon">📅</span>
              <span class="card-title">{{ t('month_card') }}</span>
            </div>
            <div class="card-body">
              <div class="card-info">
                <span class="info-label">{{ t('month_card_price') }}:</span>
                <span class="info-value">{{ works_monpay }}{{ t('yuan_per_once') }}</span>
              </div>
              <div class="card-info">
                <span class="info-label">{{ t('remaining_days') }}:</span>
                <span class="info-value">{{ works_month_nums }} {{ t('day') }}</span>
              </div>
            </div>
            <div class="card-footer">
              <button class="recharge-button" @click="handleRechargeClick('works_month')">{{ t('recharge') }}</button>
            </div>
          </div>
          
          <!-- 次卡 -->
          <div class="recharge-card">
            <div class="card-header">
              <span class="card-icon">🔢</span>
              <span class="card-title">{{ t('times_card') }}</span>
            </div>
            <div class="card-body">
              <div class="card-info">
                <span class="info-label">{{ t('times_card_price') }}:</span>
                <span class="info-value">{{ works_oncepay }}{{ t('yuan_per_once') }}</span>
              </div>
              <div class="card-info">
                <span class="info-label">{{ t('remaining_times') }}:</span>
                <span class="info-value">{{ works_once_nums }} {{ t('times') }}</span>
              </div>
            </div>
            <div class="card-footer">
              <button class="recharge-button" @click="handleRechargeClick('works_once')">{{ t('recharge') }}</button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 情感咨询套餐 -->
      <div class="recharge-section">
        <h2 class="section-title">{{ t('emotional_consultation') }}</h2>
        <div class="card-container">
          <!-- 月卡 -->
          <div class="recharge-card">
            <div class="card-header">
              <span class="card-icon">📅</span>
              <span class="card-title">{{ t('month_card') }}</span>
            </div>
            <div class="card-body">
              <div class="card-info">
                <span class="info-label">{{ t('month_card_price') }}:</span>
                <span class="info-value">{{ emotion_monpay }}{{ t('yuan_per_once') }}</span>
              </div>
              <div class="card-info">
                <span class="info-label">{{ t('remaining_days') }}:</span>
                <span class="info-value">{{ emotion_month_nums }} {{ t('day') }}</span>
              </div>
            </div>
            <div class="card-footer">
              <button class="recharge-button" @click="handleRechargeClick('emotion_month')">{{ t('recharge') }}</button>
            </div>
          </div>
          
          <!-- 次卡 -->
          <div class="recharge-card">
            <div class="card-header">
              <span class="card-icon">🔢</span>
              <span class="card-title">{{ t('times_card') }}</span>
            </div>
            <div class="card-body">
              <div class="card-info">
                <span class="info-label">{{ t('times_card_price') }}:</span>
                <span class="info-value">{{ emotion_oncepay }}{{ t('yuan_per_once') }}</span>
              </div>
              <div class="card-info">
                <span class="info-label">{{ t('remaining_times') }}:</span>
                <span class="info-value">{{ emotion_once_nums }} {{ t('times') }}</span>
              </div>
            </div>
            <div class="card-footer">
              <button class="recharge-button" @click="handleRechargeClick('emotion_once')">{{ t('recharge') }}</button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 公关审核套餐 -->
      <div class="recharge-section">
        <h2 class="section-title">{{ t('publicity_audit') }}</h2>
        <div class="card-container">
          <!-- {{ t('month_card') }} -->
          <div class="recharge-card">
            <div class="card-header">
              <span class="card-icon">📅</span>
              <span class="card-title">{{ t('month_card') }}</span>
            </div>
            <div class="card-body">
              <div class="card-info">
                <span class="info-label">{{ t('month_card_price') }}:</span>
                <span class="info-value">{{ pr_monpay }}{{ t('yuan_per_once') }}</span>
              </div>
              <div class="card-info">
                <span class="info-label">{{ t('remaining_days') }}:</span>
                <span class="info-value">{{ pr_month_nums }} {{ t('day') }}</span>
              </div>
            </div>
            <div class="card-footer">
              <button class="recharge-button" @click="handleRechargeClick('pr_month')">{{ t('recharge') }}</button>
            </div>
          </div>
          
          <!-- 次卡 -->
          <div class="recharge-card">
            <div class="card-header">
              <span class="card-icon">🔢</span>
              <span class="card-title">{{ t('times_card') }}</span>
            </div>
            <div class="card-body">
              <div class="card-info">
                <span class="info-label">{{ t('times_card_price') }}:</span>
                <span class="info-value">{{ pr_oncepay }}{{ t('yuan_per_once') }}</span>
              </div>
              <div class="card-info">
                <span class="info-label">{{ t('remaining_times') }}:</span>
                <span class="info-value">{{ pr_once_nums }} {{ t('times') }}</span>
              </div>
            </div>
            <div class="card-footer">
              <button class="recharge-button" @click="handleRechargeClick('pr_once')">{{ t('recharge') }}</button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 团体套餐 -->
      <div class="recharge-section">
        <h2 class="section-title">{{ t('group_package') }}</h2>
        <div class="card-container">
          <!-- {{ t('month_card') }} -->
          <div class="recharge-card">
            <div class="card-header">
              <span class="card-icon">📅</span>
              <span class="card-title">{{ t('month_card') }}</span>
            </div>
            <div class="card-body">
              <div class="card-info">
                <span class="info-label">{{ t('month_card_price') }}:</span>
                <span class="info-value">{{ group_monpay }}{{ t('yuan_per_once') }}</span>
              </div>
              <div class="card-info">
                <span class="info-label">{{ t('remaining_days') }}:</span>
                <span class="info-value">{{ group_month_nums }} {{ t('day') }}</span>
              </div>
            </div>
            <div class="card-footer">
              <button class="recharge-button" @click="handleRechargeClick('group_month')">{{ t('recharge') }}</button>
            </div>
          </div>
          
          <!-- 次卡 -->
          <div class="recharge-card">
            <div class="card-header">
              <span class="card-icon">🔢</span>
              <span class="card-title">{{ t('times_card') }}</span>
            </div>
            <div class="card-body">
              <div class="card-info">
                <span class="info-label">{{ t('times_card_price') }}:</span>
                <span class="info-value">{{ group_oncepay }}{{ t('yuan_per_once') }}</span>
              </div>
              <div class="card-info">
                <span class="info-label">{{ t('remaining_times') }}:</span>
                <span class="info-value">{{ group_once_nums }} {{ t('times') }}</span>
              </div>
            </div>
            <div class="card-footer">
              <button class="recharge-button" @click="handleRechargeClick('group_once')">{{ t('recharge') }}</button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 学业考研套餐 -->
      <div class="recharge-section">
        <h2 class="section-title">{{ t('academic_education') }}</h2>
        <div class="card-container">
          <!-- {{ t('month_card') }} -->
          <div class="recharge-card">
            <div class="card-header">
              <span class="card-icon">📅</span>
              <span class="card-title">{{ t('month_card') }}</span>
            </div>
            <div class="card-body">
              <div class="card-info">
                <span class="info-label">{{ t('month_card_price') }}:</span>
                <span class="info-value">{{ stu_month_pay }}{{ t('yuan_per_once') }}</span>
              </div>
              <div class="card-info">
                <span class="info-label">{{ t('remaining_days') }}:</span>
                <span class="info-value">{{ stu_month_nums }} {{ t('day') }}</span>
              </div>
            </div>
            <div class="card-footer">
              <button class="recharge-button" @click="handleRechargeClick('stu_month')">{{ t('recharge') }}</button>
            </div>
          </div>
          
          <!-- 次卡 -->
          <div class="recharge-card">
            <div class="card-header">
              <span class="card-icon">🔢</span>
              <span class="card-title">{{ t('times_card') }}</span>
            </div>
            <div class="card-body">
              <div class="card-info">
                <span class="info-label">{{ t('times_card_price') }}:</span>
                <span class="info-value">{{ stu_once_pay }} {{ t('yuan_per_once') }}</span>
              </div>
              <div class="card-info">
                <span class="info-label">{{ t('remaining_times') }}:</span>
                <span class="info-value">{{ stu_once_nums }} {{ t('times') }}</span>
              </div>
            </div>
            <div class="card-footer">
              <button class="recharge-button" @click="handleRechargeClick('stu_once')">{{ t('recharge') }}</button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 支付对话框组件 -->
      <PaymentDialog ref="paymentDialog" :packageInfo="currentPackage" @success="handlePaymentSuccess" @cancel="handlePaymentCancel" @error="handlePaymentError" />
      </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import PaymentDialog from '@/components/common/PaymentDialog.vue';
import { ElMessage } from 'element-plus';
import { Loading } from '@element-plus/icons-vue';
import { getUserCombo } from '@/api/chat';
import { useLanguageStore } from '@/store/languageStore';
import CallBack from '@/components/common/CallBack.vue';
const { t } = useLanguageStore();

// 加载状态
const loading = ref(false);

// 项目咨询
const onceFee = ref(0);
const monthFee = ref(0);
const onceTimes = ref(0);
const monthTimes = ref(0);

// 工作事业
const works_once_nums = ref(0);
const works_month_nums = ref(0);
const works_oncepay = ref(0);
const works_monpay = ref(0);

// 情感咨询
const emotion_once_nums = ref(0);
const emotion_month_nums = ref(0);
const emotion_oncepay = ref(0);
const emotion_monpay = ref(0);

// 公关审核
const pr_once_nums = ref(0);
const pr_month_nums = ref(0);
const pr_oncepay = ref(0);
const pr_monpay = ref(0);

// 团体套餐
const group_once_nums = ref(0);
const group_month_nums = ref(0);
const group_oncepay = ref(0);
const group_monpay = ref(0);

// 学业考研
const stu_once_nums = ref(0);
const stu_month_nums = ref(0);
const stu_once_pay = ref(0);
const stu_month_pay = ref(0);

// 支付组件引用
const paymentDialog = ref(null);
const currentPackage = ref({
  type: '',
  name: '',
  price: 0
});

// 获取用户套餐信息
const fetchUserCombo = async () => {
  try {
    const response = await getUserCombo();
    
    if (response.code === 0) {
      const data = response.data;
      onceTimes.value = data.once_nums;
      monthTimes.value = data.month_day;
      onceFee.value = data.oncepay;
      monthFee.value = data.monpay;
      works_once_nums.value = data.works_once_nums;
      works_month_nums.value = data.works_month_nums;
      works_oncepay.value = data.works_oncepay;
      works_monpay.value = data.works_monpay;
      emotion_once_nums.value = data.emotion_once_nums;
      emotion_month_nums.value = data.emotion_month_nums;
      emotion_oncepay.value = data.emotion_oncepay;
      emotion_monpay.value = data.emotion_monpay;
      // 公关审核
      pr_once_nums.value = data.pr_once_nums;
      pr_month_nums.value = data.pr_month_nums;
      pr_oncepay.value = data.pr_oncepay;
      pr_monpay.value = data.pr_monpay;
      // 团体套餐
      group_once_nums.value = data.group_once_nums;
      group_month_nums.value = data.group_month_nums;
      group_oncepay.value = data.group_oncepay;
      group_monpay.value = data.group_monpay;
      // 学业考研
      stu_once_nums.value = data.stu_once_nums;
      stu_month_nums.value = data.stu_month_nums;
      stu_once_pay.value = data.stu_once_pay;
      stu_month_pay.value = data.stu_month_pay;
    } else {
      // 如果API调用失败，使用默认数据
      setDefaultData();
      ElMessage.warning(response.msg || '获取套餐信息失败，显示默认数据');
    }
  } catch (error) {
    console.error('获取套餐信息失败:', error);
    ElMessage.error('获取套餐信息失败，请稍后再试');
    // 出错时使用默认数据
    setDefaultData();
  }
};

// 设置默认数据
const setDefaultData = () => {
  onceTimes.value = 5;
  monthTimes.value = 15;
  onceFee.value = 99;
  monthFee.value = 199;
  works_once_nums.value = 3;
  works_month_nums.value = 10;
  works_oncepay.value = 129;
  works_monpay.value = 249;
  emotion_once_nums.value = 2;
  emotion_month_nums.value = 8;
  emotion_oncepay.value = 149;
  emotion_monpay.value = 299;
  // 公关审核默认数据
  pr_once_nums.value = 3;
  pr_month_nums.value = 10;
  pr_oncepay.value = 139;
  pr_monpay.value = 269;
  // 团体套餐默认数据
  group_once_nums.value = 4;
  group_month_nums.value = 12;
  group_oncepay.value = 159;
  group_monpay.value = 289;
  // 学业考研默认数据
  stu_once_nums.value = 3;
  stu_month_nums.value = 10;
  stu_once_pay.value = 119;
  stu_month_pay.value = 239;
};

// 处理充值点击
const handleRechargeClick = (type) => {
  // 设置当前套餐信息
  switch (type) {
    case 'once':
      currentPackage.value = {
        type: 'once',
        name: '项目咨询次卡',
        price: onceFee.value
      };
      break;
    case 'month':
      currentPackage.value = {
        type: 'month',
        name: '项目咨询月卡',
        price: monthFee.value
      };
      break;
    case 'works_once':
      currentPackage.value = {
        type: 'works_once',
        name: '工作事业次卡',
        price: works_oncepay.value
      };
      break;
    case 'works_month':
      currentPackage.value = {
        type: 'works_month',
        name: '工作事业月卡',
        price: works_monpay.value
      };
      break;
    case 'emotion_once':
      currentPackage.value = {
        type: 'emotion_once',
        name: '情感咨询次卡',
        price: emotion_oncepay.value
      };
      break;
    case 'emotion_month':
      currentPackage.value = {
        type: 'emotion_month',
        name: '情感咨询月卡',
        price: emotion_monpay.value
      };
      break;
    case 'pr_once':
      currentPackage.value = {
        type: 'pr_once',
        name: '公关审核次卡',
        price: pr_oncepay.value
      };
      break;
    case 'pr_month':
      currentPackage.value = {
        type: 'pr_month',
        name: '公关审核月卡',
        price: pr_monpay.value
      };
      break;
    case 'group_once':
      currentPackage.value = {
        type: 'group_once',
        name: '团体套餐次卡',
        price: group_oncepay.value
      };
      break;
    case 'group_month':
      currentPackage.value = {
        type: 'group_month',
        name: '团体套餐月卡',
        price: group_monpay.value
      };
      break;
    case 'stu_once':
      currentPackage.value = {
        type: 'stu_once',
        name: '学业考研次卡',
        price: stu_once_pay.value
      };
      break;
    case 'stu_month':
      currentPackage.value = {
        type: 'stu_month',
        name: '学业考研月卡',
        price: stu_month_pay.value
      };
      break;
    default:
      break;
  }
  
  // 打开支付对话框
  paymentDialog.value.showPayment();
};

// 支付结果处理函数
const handlePaymentSuccess = () => {
  ElMessage.success('支付成功！');
  fetchUserCombo(); // 刷新套餐信息
};

const handlePaymentCancel = () => {
  ElMessage.info('支付已取消');
};

const handlePaymentError = (error) => {
  ElMessage.error('支付失败，请重试：' + (error?.message || ''));
};

// 在组件卸载前清除可能的资源
onBeforeUnmount(() => {
  loading.value = false;
});

// 初始化
onMounted(() => {
  fetchUserCombo();
});
</script>

<style lang="less" scoped>
.recharge-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  position: relative;
  min-height: 100vh;
}

/* 加载遮罩样式 */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(3px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.loading-spinner .el-icon {
  font-size: 36px;
  color: #4dabf7;
  margin-bottom: 16px;
}

.loading-spinner span {
  color: #333;
  font-size: 16px;
  font-weight: 500;
}

.page-title {
  font-size: 32px;
  color: #333;
  margin-bottom: 36px;
  text-align: center;
  font-weight: 600;
}

.recharge-content {
  padding: 16px;
}

.recharge-section {
  margin-bottom: 48px;
  background-color: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.section-title {
  font-size: 24px;
  color: #333;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid #f0f2f5;
  position: relative;
  font-weight: 600;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, #4dabf7, #339af0);
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.recharge-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  width: calc(50% - 12px);
  overflow: hidden;
  transition: all 0.4s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.recharge-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
  border-color: rgba(77, 171, 247, 0.3);
}

.card-header {
  background-color: #1677ff;
  color: white;
  padding: 15px;
  display: flex;
  align-items: center;
  
  .card-icon {
    font-size: 24px;
    margin-right: 10px;
  }
  
  .card-title {
    font-size: 18px;
    font-weight: bold;
  }
}

.card-body {
  padding: 15px;
  background-color: white;
}

.card-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  
  .info-label {
    color: #666;
  }
  
  .info-value {
    font-weight: bold;
    color: #1677ff;
  }
}

.card-footer {
  padding: 15px;
  border-top: 1px solid #e8e8e8;
  text-align: center;
}

.recharge-button {
  background-color: #1677ff;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
  
  &:hover {
    background-color: #1668dc;
  }
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.loading-spinner {
  background-color: white;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  
  .el-icon {
    font-size: 24px;
    color: #1677ff;
    margin-bottom: 10px;
  }
}

/* 响应式适配 */
@media screen and (max-width: 768px) {
  .recharge-content {
    padding: 15px;
    margin: 0 10px;
  }
  
  .card-container {
    flex-direction: column;
  }
  
  .recharge-card {
    min-width: 100%;
    margin-bottom: 15px;
  }
  
  .section-title {
    font-size: 20px;
  }
  
  .card-header {
    padding: 16px;
  }
  
  .card-icon {
    width: 40px;
    height: 40px;
    font-size: 22px;
  }
}
</style>
